<template>
	<view class="container">
		<view class="header">
			<!-- <text class="edit-btn" @click="toggleEdit">{{ isEdit ? '取消' : '编辑' }}</text> -->
			<text class="edit-btn" @click="toggleEdit">编辑</text>
			<text class="title">购物车</text>
		</view>
		<view class="cart-list">
			<scroll-view scroll-y="true" >
				<view class="cart-item" v-for="item in cartList" :key="item.id">
					<radio :checked="item.isChecked" @click="handleToggle(item.good_id)" border-color="#606060" activeBackgroundColor="#5AB79C" activeBorderColor="#5AB79C" />
					<image :src="item.cover_img" mode="scaleToFill" style="width: 200rpx;height: 200rpx;margin-left: 20rpx;"></image>
					<view class="desc">
						<text>{{ item.name }}</text>
						<view style="margin-top: 40rpx;">
							<text style="padding: 8rpx;background-color: #F7F7F8;color: #888888;font-size: 30rpx;">{{ item.remark }}</text>
						</view>
						<view style="display: flex;flex-dirextion: row;justify-content: space-between;margin-top: 20rpx;">
							<span style="color: #BF4E49;font-weight: 500;font-size: 34rpx;">￥{{ item.price }}</span>
							<u-number-box :value="item.num" :asyncChange="true" @change="changeCount($event, item)"></u-number-box>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="good-nav">
			<label class="radio" style="display: flex;align-items: center;"><radio :checked="isAllChecked" @click="handleToggleAll" border-color="#606060" activeBackgroundColor="#5AB79C" activeBorderColor="#5AB79C" />全选</label>
			<view class="total-price">
				<span>合计:</span>
				<span style="color: #BF4E49;font-weight: 550;font-size: 36rpx;">￥{{ selPrice }}</span>
			</view>
			<u-button class="custom-style" shape="circle">{{ `去结算(${selCount})` }}</u-button>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'
	import { getShoppingList } from '@/services/shopping.js';
	
	export default {
		data() {
			return {
				flag: false
			}
		},
		onShow() {
			// this.$store.dispatch('cart/getCartAction')
			this.getCartList();
		},
		methods: {
			async getCartList() {
			      try {
			        const response = await getShoppingList();
			        if (response.status === 1) {
			          this.$store.commit('cart/setCartList', response.successMessage);
			        } else {
			          console.error(response.message);
			        }
			      } catch (error) {
			        console.error('获取购物车列表失败:', error);
			      }
			    },
			handleToggleAll(val) {
				this.flag = !this.flag
				this.$store.commit('cart/toggleAllCheck', this.flag)
			},
			handleToggle(goodId) {
				console.log(goodId)
				this.$store.commit('cart/toggleCheck', goodId)
				console.log(this.cartList)
			},
			changeCount(val, good) {
				if(val.value <= 0) {
					this.$store.dispatch('cart/delSelect', good.id)
				} else {
					this.$store.dispatch('cart/changeCountAction', {num: val.value, goodId: good.good_id})
				}
			}
		},
		computed: {
			...mapState('cart', ['cartList']),
			...mapGetters('cart', ['cartTotal', 'selCartList', 'selCount', 'selPrice', 'isAllChecked']),
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 10px;
		height: calc(100vh - 100rpx);
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20rpx;
			border-bottom: 1px solid #eaeaea;
			.edit-btn {
				color: #04BE02;
			}
			.title {
				font-size: 18px;
				font-weight: bold;
			}
		}
		.cart-list {
			flex: 1;
			padding: 20rpx;
			.cart-item {
				padding: 20rpx;
				display: flex;
				align-items: center;
				background-color: #ffffff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				.desc {
					color: #454545;
					font-size: 32rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
				}
			}
		}
		.good-nav {
			display: flex;
			padding: 30rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			color: #444444;
			align-items: center;
			justify-content: space-between;
			.total-price {
				display: flex;
				align-items: center;
				margin-right: 50rpx;
			}
			.custom-style {
				color: #ffffff;
				background-color: #5AB79C;
				width: 200rpx;
				margin: 0;
			}
		}
	}
</style>